<template lang="pug">
div
  Select(v-model='uid', @on-change='change')
    Option(v-for='member in members', :value='member.user.id', :key='member.id')
      div.flex
        Avatar(icon='person', size='small', :src='member.avatar', style='margin-right: 8px')
        span.flex-item {{ member.name }}
</template>

<script>
import Api from '@/apis'

export default {
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    value: { default: null }
  },
  data () {
    return {
      uid: this.value,
      members: {}
    }
  },
  mounted () {
    Api.Group.getGroupMemberList(this.$store.state.app.id).then(data => {
      this.members = data.data
    })
  },
  methods: {
    change (val) {
      // console.log(val)
      this.$emit('change', val)
    }
  }
}
</script>
